<template>
  <div class="">
		<div>
			<m></m>
		</div>
		<div  @click="bigpic=false" class="outer" v-show="bigpic">
			<img :src="pet[0].petPhoto" alt="" class="inter" style="position:absolute;top:200px;margin-left:30%;z-index:3;opacity: 1">
		</div>
		<div class="box">
		
		<!----识别部分---->	
		<div class="shibie">	
			<div class="left">
				<div class="uploadimg">
					<img  :src="choosepic" width="150" height="150" style="border-radius: 35px;">
						<input type="button" id="btn" value="上传识别" style="position:absolute;top:130px" @click="toshibie()">
						<input type="button" id="btn" value="取消" style="position:absolute;top:100px" @click="toesc()">
						<input type="file" id="fileinp1" value=""  @change="uploadpic($event)" accept=".jpg"> v
						<p>提示：点击图标即可选择图片！</p>
				</div>
			</div>
			<div class="right" v-show="petnull">
				<img :src="pet[0].petPhoto" width="100px" height="100px" style="border-radius: 50px;margin:5px 0 0 10px;float:left" @click.stop="bigpic=!bigpic">
				<div class="intro">
					<h2>{{pet[0].petName}}</h2>
					<p  class="info">
						<span>简介：</span><span>{{pet[0].petDescription}}</span> <br>
					</p>
				</div>
				
			</div>
		</div>
	    <!------发布入口---->
		<!-- <div class="publish">
			<img src="../assets/publish.png" @click="showpubform">
		</div> -->
		<!------发布输入页面---->
		<div class="pubform" v-show="showpub">
			<span class="tuichu" @click="esc">取消</span>
			<div style="margin:2.5%  45% 0 ;">
				<h4>发贴</h4>
			</div>
			<div class="vue-uploader"  v-show="showpub">
				<!-- <input placeholder="选择帖子类型吧" v-model="type"/> -->
				<select style="width:71%;" name="public-choice" v-model="couponSelected" @change="getCouponSelected">                                        
    				<option :value="coupon.name" v-for="(coupon,index) in couponList" :key="index" >{{coupon.name}}</option>                                    
				</select>
				<textarea placeholder="来说几句吧" type="text" rows="7" maxlength="200" v-model="pubposting_content"/>
				<!-- <section class="upload-func"> 
				</section> -->
				<el-upload
				class="up"
				action=""
				list-type="picture-card"
				:auto-upload="false"
				:multiple="true"
				:limit="3"
				:on-preview="handlePictureCardPreview"
				:on-remove="handleRemove"
				:http-request="uploadFile"
				ref="upload"
				accept="image/jpg"
				>
				<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
				<img width="80%" :src="dialogImageUrl" alt="">
				</el-dialog>
				<el-button type="primary" @click="subPicForm">发表</el-button>
  			</div>
		</div>
		<!-----帖子及猜你喜欢--->
	 <div class="tiezi">
				<div class="tiezilf" >
					<!-- <div class="sousuo"><span>搜索</span><input type="text" placeholder="快速搜索你的狗狗" value=""></div> -->
					<div>
						<h3 style="text-align: center;margin:10px auto">猜你喜欢</h3>
							<ul>
							<li v-for="(pub,index) in posting" :key="index"> 
							    <div class="blogtitle1">
								  <img class="user-image" :src="pub.userHead" />
								  <span>{{pub.userName}}</span>
								  <span class="dogtype">{{pub.petName}}</span>
								  <span class="ttime">{{pub.postingTime}}</span>
								</div>
								<!---帖子内容--->	
								<div>	
									<p style="margin-top:25px">{{pub.postingContent}}</p>
									<img v-for="(image,index1) in pub.postingpic" :key="index1" style="margin-right:15px" width="150px" height="150px" :src="image.postingPic"/>
									<div class="autor">
										<img :src="pub.islike" height="20px" alt="" @click="tolike(index)">
										<span style="margin-left: 10px;font-size:18px">{{pub.likeSum}}</span>	
										<img src="../static/talk.png" height="20px" style="margin-left: 10px" alt="" @click="totalk(index)">				
										<span style="margin-left: 10px;font-size:18px">{{pub.commentCount}}</span>
									</div>
								</div>
								<!---帖子评论--->	
							    <div>
									<ul>
										<li v-for="(comment,index2) in pub.comment" :key="index2"> 
											<img class="user-image2" height="20px" width="20px" :src="comment.userHead">
											<span style="font-size:15px">{{comment.userName}}&nbsp;:&nbsp;&nbsp;</span>
											<span>{{comment.commentContent}}</span>
											<!--&nbsp; &nbsp;回复&nbsp;&nbsp;
											 <img class="user-image" src="../assets/dog1.jpg">
											<span>小狗狗</span>-->
											<span style="float:right;margin-right:15%;color:gray">{{comment.commentDate}}</span> 
												<!-- <div class="bloginfo">
													<span>{{comment.comment_content}}</span>
												</div> -->
										</li>
									</ul>
									 <!-- 评论框 -->
									<div class="coment" v-show="talk">
										<textarea autofocus="autofocus" rows="3" v-model="pubcomment_content" maxlength="200"></textarea>
										<button @click="toPubtalk()">发表</button>
										<button @click="quxiaototalk()">取消</button>
									</div>
							  </div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>	
  </div>
</template>

<script>
// import axios from "axios"
import navbar from './../components/navbar'
export default {
  name: 'Recognition',
   components:{
    m:navbar
  },
  data(){
	  return{
		formdata1:'',
		bigpic:false,
		hh:'啦啦啦啦阿拉拉了',
		choosepic:require("../static/addpic.png"),
		formDatepic:'',//上传识别		
		pic:'',
		petnull:false,
		pet:[{
			// pet_name:"哈士奇",
			// pet_photo:require("../assets/dog1.jpg"),
			// pet_description:"哈哈哈哈哈哈啊哈哈哈或哈"
		}],
		showpub:false,//控制发帖框
		myinfo: this.$store.state.myInfo,
		// user_head:this.url+this.$store.state.myInfo.user_head,
		 //发表帖子文字内容
		dialogImageUrl: '',
		dialogVisible: false,
        formDate: ""  ,
		pubposting_content:'',
	 	couponList:[
					{
						name: '金毛犬（黄金猎犬，金毛寻回犬）'
					},
					{
						name: '泰迪'
					},
					{
						name: '猴犬（阿芬平斯澈犬，猴面梗，艾芬品）'
					},
					{
						name: '阿富汗猎犬（喀布尔犬）'
					},
					{
						name: '万能梗（梗王，河畔犬，宾格利犬，艾里梗）'
					},
					{
						name: '秋田犬（日本秋田犬/日系秋田犬）'
					},
					{
						name: '阿拉斯加雪橇犬（阿拉斯加犬、阿拉斯加马拉缪特、阿拉斯加马拉穆）'
					},
					{
						name: '美国爱斯基摩犬'
					},
					{
						name: '美国猎狐犬'
					},
					{
						name: '美国斯塔福郡梗'
					},
					{
						name: '美国水猎犬'
					},
					{
						name: '安纳托利亚牧羊犬'
					},
					{
						name: '澳大利亚牧牛犬（澳大利亚牧牛犬、昆士兰脚跟犬）'
					},
					{
						name: '其它'
					}
				],
        couponSelected: '',//petName选择
		posting:[
			// {
			// 	userHead:this.url+'//images/default1.jpg',
			// 	// user_head:require("../assets/dog1.jpg"),
			// 	userName: '爱宠之家',
			// 	postingTime:'2019-12-8',
			// 	petName:'泰迪（贵宾犬，贵妇犬，卷毛狗）',
			// 	postingContent:'天气真好，适合带狗狗出去散步',
			// 	postingpic:[
			// 		{
			// 			postingPic:require("../assets/dog1.jpg")
			// 		},
			// 		{
			// 			postingPic:this.url+'//images/default1.jpg',
			// 		}

			// 	],
			// 	commentCount:50,
			// 	islike:require('../static/like.png'),//根据true或false赋值
			// 	likeSum:15,
			// 	comment:[
			// 		{
			// 			userHead:require("../assets/dog1.jpg"),
			// 			userName:'么么哒',
			// 			commentContent:'哈哈哈哈哈',
			// 			commentDate:'2019-12-31'
			// 		},
			// 		{
			// 			userHead:require("../assets/dog1.jpg"),
			// 			userName:'么么哒',
			// 			commentContent:'哈哈哈哈哈',
			// 			commentDate:'2019-12-31'
			// 		}
			// 	]
			// }
		],
		talk:false,//控制评论框
		pubcomment_content:''
	}
  },
  beforeMount(){
	if(!this.$store.state.myInfo.user_id){
		 setTimeout (() => {
          this.$router.replace({
		  path: '/'
        })}, 10)
	}
},
//    created(){
////如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
//             this.couponSelected = this.couponList[0].id;
//          },
  methods:{
	  	toesc(){
			this.formData.delete("file");
			this.formdata1 = ''
			console.log(this.formdata1)
			this.choosepic=require("../static/addpic.png")
		  },
	  	//选择识别的图片
		uploadpic (el) {
			if (!el.target.files[0].size) return; // 如果文件大小为0，则返回
			if (el.target.files[0].type.indexOf('image/jpeg') === -1) {
				this.$message({
							showClose: true,
							message: '抱歉，系统目前只支持.jpg格式图片！',
							type: 'error'
						});
				} else {
				const that = this;
				const reader = new FileReader(); // 创建读取文件对象
				reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
				reader.onload = function () {  // 文件读取完成后
				// 读取完成后，将结果赋值给img的src
				that.choosepic = this.result;
				};
				let formData = new FormData();  // 创建一个formdata对象
				formData.append("file", el.target.files[0],el.target.files[0].name); 
				that.formdata1 = formData
				console.log(that.formdata1)
			}
		},
		//确认上传识别
		toshibie(){
			let that = this
			console.log(that.formdata1)
			if(!that.formdata1){
				that.$message({
						showClose: true,
						message: '请先点击图标选择图片！',
						type: 'error'
					});
			}
			else {
				let config = {
					headers: {'Content-Type': 'multipart/form-data'}
					}
				setTimeout (() => {
					that.$message({
						showClose: true,
						message: '识别需要时间，请耐心等待！',
						type: 'success'
					});
			}, 1000)
				that.$axios.post(that.url2+'/photo',that.formdata1,config)
					.then((res) => {
						that.choosepic = require("../static/addpic.png")
						console.log(res.data)
						let dogname = res.data
						console.log(dogname+'名字')
						that.togetdog(dogname)//传给后端获取信息
					})
					.catch((err) => {
						that.choosepic = require("../static/addpic.png")
						console.log(err) //错误信息
						that.$message({
						showClose: true,
						message: '系统异常！',
						type: 'error'
					});
				})			
			}
		},
		//把返回的狗品种名传给后端获取狗的信息
		togetdog(i){
			console.log(i)
			let that = this
			let pet_type = i
			that.$axios.get(that.url1+'/backend/pet/querypet',{
				params:{
						petId: pet_type
					}
			})
			.then(res=>{
				console.log(res)
				console.log(res.data.information)
				this.petnull=true
				that.pet = res.data.information
				//赋值显示，并获取相关的帖子。
				console.log("获取相关的贴子")
				this.getlinkedpost(pet_type)
			})
			.catch(err => {
				console.log(err)
			})

		},
		//获取相关的帖子
	  	getlinkedpost(i){
			let petId = i
			let that = this;
			that.$axios.get(that.url1+'/backend/comment/listrelativeposting',{
				params:{
						userId: that.$store.state.myInfo.user_id,
						petId: petId
					}
			})
			.then(res => {
				console.log(res)
				that.posting = res.data.postingList.reverse()
				for(let index in that.posting){
					for(let index1 in that.posting[index].postingpic){
						console.log(that.posting[index].postingpic[index1].postingPic)
						that.posting[index].postingpic[index1].postingPic = that.url+that.posting[index].postingpic[index1].postingPic
					}

					that.posting[index].userHead =  that.url+that.posting[index].userHead

					console.log(that.posting[index].islike)
					if(that.posting[index].islike){
						that.posting[index].islike = require('../static/like-active.png')
					}
					else{
						that.posting[index].islike = require('../static/like.png')
					}
					console.log("成功获取数据赋值给posting");
				}
				//处理评论里头像
				for(let index in that.posting){
					for(let index2 in that.posting[index].comment){
					console.log(that.posting[index].comment[index2].userHead)
					that.posting[index].comment[index2].userHead = that.url+that.posting[index].comment[index2].userHead
					}
				}
			})
				.catch(err => {
					console.log(err)
					that.$message({
							showClose: true,
							message: '获取帖子列表异常！',
							type: 'error'
						});
				})
		},
		//点赞
		tolike(i){
		let that = this
		if(that.posting[i].islike == require('../static/like.png') ){
			 that.$axios.get(that.url1+'/backend/comment/insertlike',{
				params:{
					userId: that.$store.state.myInfo.user_id,
					postingId: that.posting[i].postingId,
				}
			})
          .then(res => {
			console.log(res);
			if(res.data.like){
				console.log("点赞成功！");
			that.posting[i].islike =  require('../static/like-active.png') ;
			that.posting[i].likeSum += 1;
			}else{
				console.log("点赞失败！");
				setTimeout(function(){
					that.$message({
						showClose: true,
						message: '点赞失败！',
						type: 'error'
						});
				},500)
			}
			// that.posting[i].islike = require('../static/like-active.png') ;
         	// that.posting[i].likeSum += 1;
          })
          .catch(err =>{
			console.log(err);
			setTimeout(function(){
				that.$message({
					showClose: true,
					message: '点赞失败！',
					type: 'error'
				});
			},500)
          });
		}
		else{
          // 取消点赞
        console.log(that.posting[i].postingId);
          that.$axios.get(that.url1+'/backend/comment/deletelike',{
				params:{
					userId: that.$store.state.myInfo.user_id,
					postingId: that.posting[i].postingId,
				}
		  })
          .then(res => {
			console.log(res);
			if(res.data.cancelLike){
				console.log("取消点赞！");
				that.posting[i].islike = require('../static/like.png') ;
				that.posting[i].likeSum -= 1;
			}else{
				setTimeout(function(){
				that.$message({
					showClose: true,
					message: '取消点赞失败！',
					type: 'error'
				});
			},500)
			}
          })
          .catch(err => {
            console.log(err);
          });
        //   that.posting[i].islike = require('../static/like.png') ;
        //   that.posting[i].likeSum -= 1;
        }

	  	},
	  	//控制评论框
	  	totalk(i){
			this.index = i;
			this.talk = !this.talk;
			this.pubcomment_content="";
	 	 },
	  	quxiaototalk(){
		  	this.pubcomment_content="";
		  	this.talk = !this.talk;
	  	},
	 	//发表评论
	  	toPubtalk(){
		  let that = this;
			that.$axios.post(that.url1+'/backend/comment/addcomment',that.$qs.stringify({
				userId: that.$store.state.myInfo.user_id,
				postingId: that.posting[that.index].postingId,
				// time: that.$store.state.getTime(),
				commentContent: that.pubcomment_content
			})
			)
			.then(res =>{
			console.log(res);
			if(res.data.Success){
				console.log("评论成功！");
			setTimeout(function(){
				that.$message({
					showClose: true,
					message: '发表成功！',
					type: 'success'
				});
			},500)
			// that.posting[i].microComm += 1;
			that.comment_content = "";
			that.getlinkedpost();
			}else{
				setTimeout(function(){
				that.$message({
					showClose: true,
					message: '发表失败！',
					type: 'error'
				});
			},500)
			}
			
			})
			.catch(function (error) {
			console.log(error);
			});
			this.talk = !this.talk;
	  	},
	  	//展示发帖框
	  	showpubform(){
		  	this.showpub = true
	  	},
	  	//取消发帖
	  	esc(){
			this.showpub = false;
			this.couponSelected = ""
			this.pubposting_content = ""
			this.$refs.upload.clearFiles();
		},
	    //获取选中的帖子类型
	  	getCouponSelected(){
        	console.log(this.couponSelected)
	  	},
	  	// elementUI上传
		uploadFile(file) {
			this.formDate.append('file', file.file);
		},
		//预览图片
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
	  
	  	//发表
      	subPicForm() {
			let that = this
			// let posting_time = that.$store.state.getTime()
			// let pet_id = that.couponSelected
			// let posting_content = that.posting_content
			// console.log(that.couponSelected)
			let posting_id = that.$store.state.getPid()
			console.log(posting_id)
			// console.log(that.$store.state.getTime())
			if( !that.couponSelected){
				that.$message({
								showClose: true,
								message: '请选择帖子类别！',
								type: 'error'
						});
			}else{
				console.log(that.couponSelected)
				that.$axios.get(that.url1+"/backend/comment/chinesetoenglish", {
				params:{
						petName: that.couponSelected
					}
				})
				.then(res=>{
					console.log(res.data)
					console.log("你好呀")
					let pet_chinesename = res.data.petId
					that.$axios.post(this.url+"/post/newpost", that.$qs.stringify({
						posting_id: posting_id,
						user_id: that.$store.state.myInfo.user_id,
						pet_id : pet_chinesename,
						posting_content : that.pubposting_content,
						posting_time: that.$store.state.getTime()
						})
					)
					.then(res => {
		  				console.log(res)
		  				if(res.data.status == 2){
			  				console.log("帖子内容发表成功")
			  	    		that.formDate = new FormData();
				    		that.$refs.upload.submit();
				    		that.formDate.append('posting_id', posting_id);
				    		let config = {
				      			headers: {
				        			'Content-Type': 'multipart/form-data'
				     			}
				    		};
				   		that.$axios.post(this.url+"/post/postingpic", that.formDate, config)
				   		.then(res => {
					   	console.log(res)
					   	if(res.data.status == 2){
						   that.$message({
							showClose: true,
							message: '发表成功！',
							type: 'success'
						});
						that.getlinkedpost()
						that.showpub = false;
						that.couponSelected = ""
						that.pubposting_content = ""
						that.$refs.upload.clearFiles();
					    }
					   	else{
						    that.$message({
							showClose: true,
							message: '帖子发表异常！',
							type: 'error'
						});
					   }
					  
						})
						.catch(res => {
					  		console.log(res)
					   		that.$message({
							showClose: true,
							message: '帖子发表异常！',
							type: 'error'
						});
				    	})
					}
					else{
						that.$message({
							showClose: true,
							message: '发表失败！',
							type: 'error'
						});
					}
        		}).catch(res => {
					console.log(res)
					that.$message({
						showClose: true,
						message: '发表失败！',
						type: 'error'
					});
        		})
			})
			.catch(err=>{
				console.log(err)
			})	 
		}	
	},
	},
	
  }

</script>
<style scoped>
			.outer{
			position: absolute;;
			height: 100vh;
			width: 100%;
			z-index:3;
			
			background: #f8f9fac1; 
			}
			/* .inner:before{
			content:'';
			position:absolute;
			top: 0;right: 0;left: 0;bottom: 0;
			filter:blur(5px);
			background: rgba(255,0,0,0.5);
			z-index:2;
			} */
			.inner{
			opacity: 0;
			position:absolute;
			top: 0;right: 0;left: 0;bottom: 0;
			font:  20px/1.5 '宋体';
			height: 160px;
			width: 180px;
			margin:auto;
			/* background:hsla(0,0%,100%,.3); */
			}
			.box{
				width: 100%;
				margin: 0 10%;
			}
      		.shibie{
				width: 80%;
				margin: 70px 0px 0px 0px;
				background: rgb(198, 223, 238);
				position: fixed;
				z-index: 2;
				border: 0.5px solid gray;
				border-right: 1px solid gray;
			}
			.left{
				margin: 10px 0 10px 20px;
				float: left;
				background: rgb(198, 223, 238);
				width: 300px;
				border-right: 1px solid #b6b3b3;
			}
			.right{
				margin-top:10px;
				margin-left: 320px;
				background: rgb(198, 223, 238);
				display: flex;
				height: 220px;
			}
			.right .intro{
				margin: 10px 0 0 10px;
				overflow: hidden;
			}
			.right h2 {
				font-size: 20px;
				/* text-shadow: 0 0 1px #ddd; */
				color: #333;
				height: 28px;
				min-width: 100px;
			}
			.right .info{
				margin: 0;
				min-width: 100px;
			}
      		.uploadimg{
				margin:10px 0 10px 0px;
				float: left;
				width: 100%;
				height: 200px;
				vertical-align: middle;
				position: relative;
				text-align: center;
			}
			#fileinp1{
				position: absolute;
				width: 150px;
				height: 150px;
				left:65px;
				top: 0;
				opacity: 0;
			}
			.user-image{
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 30px;
				vertical-align: middle;
				margin-right: 10px;
			}
			.headPhoto{
				width: 70px;
				height: 70px;
				border-radius: 70px;
				display: inline-block;
			}
			.tiezi{
				overflow-y: scroll;
				position: absolute;
				background: #e6090900;
				margin-top: 310px;
				width: 80%;
			}
			.tiezi::-webkit-scrollbar {
				display: none;
			}
			.tiezilf{
				width: 100%;
				float: left;
				padding:0px 20px 40px ;
				border-right: 2px solid rgb(179, 175, 175);
				border: 1px solid rgb(179, 175, 175);
				box-sizing: border-box;
				margin: 10px 0;
			}
			.tiezilf ul{
				border-bottom: 1px solid rgb(20, 19, 19);
				border-right:1px solid rgb(179, 175, 175);
				border: 1px solid rgb(179, 175, 175);
				list-style: none;
			}
			.tiezilf li{
				padding: 10px 0;
				border-bottom: 1px solid #ddd;
			}
			.sousuo{
				margin-left: 0;
				text-align: center;
			}
			.sousuo input{
				width: 50%;
				height: 36px;
				/* line-height: 36px; */
				border: 1px solid #dddddd;
				font-size: 12px;
				color: #999999;
				background: rgb(238,238,238);
				border-radius: 15px;
				margin: 0 10px;
				padding: 0px 6px;
			}
			.blogs li {
				margin-bottom: 10px;
				overflow: hidden;
				padding: 20px;
				background: #fff;				
			}
			.blogtitle1 {
				line-height: 20px;
				height: 20px;
				margin: 5px 0;
			}
			.bloginfo p {
				color: #888;
				line-height: 15px;
			}
			.autor {
				padding-left: 80%;
				width: 100%;
				overflow: hidden;
				clear: both;
				margin: 20px 0 0 0;
				display: inline-block;
				color: #838383;
				font-size: 12px;
			}
			.ttime {
				float: right;
				margin-right: 20%
			}
			.user-image{
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 30px;
				vertical-align: middle;
				margin-right: 10px;
			}
			.user-image2{
				display: inline-block;
				width: 25px;
				height: 25px;
				border-radius: 12.5px;
				vertical-align: middle;
				margin-right: 10px;
			}
			.headPhoto{
				width: 70px;
				height: 70px;
				border-radius: 70px;
				display: inline-block;
			}
			label{
			  position: relative;
			}
			#fileinp{
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
			}
			#text{
				color: red;
			}
			#btn{
				padding: 5px 10px;
				background: #00b0f0;
				color: #FFF;
				border: none;
				border-radius: 5px;
			}
			.dogtype{
				display: inline-block;
				/* width: 60px; */
				padding:0 10px; 
				height: 25px;
				line-height: 25px;
				font-size: 12px;
				border-radius: 40px;
				background: #00B0F0;
				text-align: center;
				margin-left: 30px;
			}

			.publish{
				position: fixed;
				height:85px;
				width:85px;
				top:235px;
				left: 64%;
				z-index: 2;
			}
			.publish img{
				background: #ddd;
				margin:5px;
				height: 70px;
				width:70px;
				border-radius: 10px;
			}
			.pubform{
				/* text-align: center; */
				/* padding: auto 2%; */
				top:14%;
				left: 30%;
				width: 30%;
				background: rgba(245, 247, 247, 0.796);
				position: fixed;
				box-shadow: 5px 5px 5px #888888;
				z-index: 3;
				border-radius: 10px;
				opacity: 1;
			}

			/*发帖表单页面 */
			.tuichu{
				float:right;
				margin:10px 2% 0 0;
				color:black;
				cursor: pointer;
				margin-right: 2%;
				/* float:right; */
			}
			.vue-uploader {
				border: 1px solid #e5e5e5;
				margin: 2%;
				display: flex;
				flex-direction: column;	
			}
			.vue-uploader textarea{
				width: 70%;
				margin-top: 10px;
			}
			.vue-uploader .up{
				margin-top: 5px;
				/* width: 30px ;
				height: 30px; */
			}
			.el-upload--picture-card {
				/* background-color: #fbfdff;
				border: 1px dashed #c0ccda; */
				border-radius: 6px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				width: 100px;
				height:100px;
				line-height: 100px;
				vertical-align: top;
			}
			.el-upload--picture-card .el-upload-dragger {
				box-sizing: border-box;
				cursor: pointer;
			}

			/*评论框*/
			.coment {
				position: fixed;
				top: 170px;
				margin-left: 30vw ;
				width: 30vw;
				height: 200px;
				border: 1px solid #B2B2B2;
				border-radius: 10px;
				background-color: #fff;
				z-index: 9999999;
				box-shadow: 5px 5px 5px #888888;
			}
			.coment textarea {
				position: relative;
				width: 25vw;
				height: 100px;
				margin: 15px 2.5vw 0;
				padding: 5px 5px;
				border: 1px solid #E4E4E4;
				font-size: 15px;
				z-index: 99999999;
			}
			.coment button {
				width: 25vw;
				margin: 0px 2.5vw 0;
				height: 28px;
				margin-top: 5px;
				font-size: 14px;
				line-height: 28px;
				background-color:  rgb(209, 211, 245);
			}
			.coment button:active {
				background-color: lightblue;
			}
</style>